<template>
  <div class="box">
    <div class="loginHeader">
      <p><img src="http://fat.teyunquan.com/front/logo.39fc7d9.png" alt=""></p>
      <span><img src="@a/images/loginTop1.png" alt=""></span>
    </div>
    <div class="login-wrap">
      <!-- <img src="@a/images/loginBg.png" alt=""> -->
      <div class="loginBox">
        <el-form
          class="login-form"
          label-position="top"
          label-width="80px"
          :model="loginData"
          :rules="rules"
          ref="loginRef"
        >
        <h2>登录</h2>
          <el-form-item prop="username">
            <el-input  v-model="loginData.username" placeholder="企业登陆账号" >
              <i slot="prefix" class="iconfont el-icon-user"></i>
            </el-input>
          </el-form-item>
          <p style="height:2px;"></p>
          <el-form-item prop="password">
            <el-input v-model="loginData.password" type="password" placeholder="密码">
              <i slot="prefix" class="iconfont el-icon-mima"></i>
            </el-input>
          </el-form-item>
          <p class="editPsd"><span @click="editPsd">忘记密码</span></p>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              @click.prevent="loginbtn('loginRef')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <a href="https://beian.miit.gov.cn/?spm=a2cmq.17630000.J_9220772140.109.279279feGqklF0#/Integrated/index">京ICP备20024757号-2</a>
    </div>
</div>

</template>

<script>
import qs from 'qs'
import validPsd from '@t/validate.js'
export default {
  data() {
    return {
      loginData: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
         
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: "请输入8-20位由数字、字母组合的密码", trigger: "blur" },
        ]
      }
    };
  },
  methods: {
    loginbtn(formName) {
      this.$refs[formName].validate(valid => {
        console.log(222);
        if (valid) {
          const params={
                username: this.loginData.username,
                password: this.loginData.password,
                grant_type: 'password',
                client_id: 'zkzx',
                scope: 'all'
          }
          console.log(11111);
          // let data = await this.$http.loginApi.login(params)
          this.$http.loginApi.login(params)
          .then(res =>{
            console.log(res);
            if (res.status==200){
              const token={
                access_token:res.data.access_token,
                userid:res.data.userId,
                companyId:res.data.companyId
              }
              window.sessionStorage.setItem('token',JSON.stringify(token))
              this.$router.push({name: 'workbench'})
              this.$message.success('登录成功')
            }
          })
          .catch((err) => {
            // console.log(err.data.error_description);
            this.$message.warning(err.data.error_description)
          })

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳转修改密码
    editPsd(){
      this.$router.push('/editpsd')
    },
  }
};
</script>

<style scoped>
.box{
  height: 100%;
  position: relative;
}
.loginHeader{
  height:64px;
  background: #181C27;
  padding: 16px 0 16px 60px;
  display: flex;
  align-items: flex-end;
}
.loginHeader p{
  width: 140px;
}
.loginHeader span{
  width: 190px;
  border-left: 1px solid #979797;
  margin-left: 9px;
  padding: 2px 0 2px 9px;
}
.login-wrap{
  position: relative;
  background:url('http://fat.teyunquan.com/front/loginBg.a50a47d.png') no-repeat center ;
  background-size: cover;
  position: absolute;
  top: 64px;
  bottom: 40px;
  left: 0;
  right: 0;
}
.loginBox{
  position: absolute;
  top:100px;
  min-width: 400px;
  right: 11.87%;
  width: 27.75%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 50px 42px 6% 42px;
}
.loginBox h2{
  font-size:24px;
  color: #181C27;
  margin-bottom: 30px;
}
.editPsd{
  color: #2878FF;
  text-align: right;
}
.editPsd span{
  cursor: pointer;
}
.login-btn{
  width: 100%;
  height: 48px;
  background: #2878FF;
  border-radius: 8px;
}
.footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;



}

    /* height: calc(100vh - 64px);
    object-fit: cover;
    width: 100%;
    max-height: 100%; */
</style>
